import 'package:foxue/page/detail.dart';
import 'package:foxue/global.dart';
import 'package:foxue/http/api.dart';
import 'package:flutter/material.dart';

class DirectoryPage extends StatefulWidget {
  DirectoryPage({Key key, this.id}) : super(key: key);
  final String id;
  @override
  _DirectoryPageState createState() => _DirectoryPageState();
}

class _DirectoryPageState extends State<DirectoryPage> {
  var _data;
  @override
  void initState() {
    String _id = widget.id;
    getFoxueBookDirectory(_id).then((res) {
      setState(() {
        _data = res;
      });
    });
    super.initState();
  }

  List<Widget> renderDirectory(items) {
    List<Widget> list = [];
    for (var i = 0; i < items.length; i++) {
      var item = items[i];
      list.add(
        InkWell(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => DetailPage(
                  id: item['id'].toString(),
                ),
              ),
            );
          },
          child: Container(
            width: MediaQuery.of(context).size.width,
            margin: EdgeInsets.all(5),
            padding: EdgeInsets.all(5),
            decoration: BoxDecoration(
              border: Border(
                bottom: BorderSide(
                  width: 1,
                  color: Global.primaryColor.withOpacity(0.1),
                ),
              ),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                SizedBox(width: 5),
                Text(
                  '${(i + 1).toString()}：',
                  style: TextStyle(
                    fontFamily: 'fangzhengkai',
                    color: Global.primaryColor,
                    fontWeight: FontWeight.w700,
                    fontSize: 17,
                  ),
                ),
                SizedBox(width: 10),
                Expanded(
                  child: Text(
                    item['name'],
                    style: TextStyle(
                      fontFamily: 'fangzhengkai',
                      color: Global.fontColor,
                      fontSize: 17,
                      fontWeight: FontWeight.w700,
                      decoration: TextDecoration.underline,
                    ),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ],
            ),
          ),
        ),
      );
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return _data == null
        ? Scaffold(
            body: Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              color: Global.backgroundColor,
              child: Center(child: CircularProgressIndicator()),
            ),
          )
        : Scaffold(
            body: Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              decoration: BoxDecoration(
                color: Global.backgroundColor,
              ),
              child: Column(
                children: [
                  Container(
                    padding: EdgeInsets.fromLTRB(0, Global.paddingTop, 0, 10),
                    decoration: BoxDecoration(
                      color: Global.backgroundColor,
                      boxShadow: [
                        BoxShadow(
                          color: Colors.black.withOpacity(0.2),
                          offset: Offset(0, 2),
                          blurRadius: 2,
                          spreadRadius: 2,
                        )
                      ],
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        IconButton(
                          icon: Icon(
                            Icons.chevron_left,
                            color: Global.primaryColor,
                            size: 27,
                          ),
                          tooltip: '返回首页',
                          onPressed: () {
                            Navigator.of(context).pop();
                          },
                        ),
                        Expanded(
                          child: Center(
                            child: Text(
                              "${_data['title']} - 目录",
                              style: TextStyle(
                                fontFamily: 'fangzhengkai',
                                fontWeight: FontWeight.w700,
                                fontSize: 18,
                                color: Global.fontColor,
                              ),
                            ),
                          ),
                        ),
                        SizedBox(width: 53),
                      ],
                    ),
                  ),
                  Expanded(
                    child: SingleChildScrollView(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Column(
                            children: renderDirectory(_data['directory']),
                          ),
                          SizedBox(height: 35),
                        ],
                      ),
                    ),
                  )
                ],
              ),
            ),
          );
  }
}
